<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_dataFlowService"></title>
    <script type="text/javascript" include="widgets" src="../js/include-web.js"></script>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
    <script type="text/javascript" include='mapv' src="../../dist/leaflet/include-leaflet.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var map,
            urlMap = host + "/iserver/services/map-china/rest/maps/ChinaDark",
            urlQuery = host + "/iserver/services/map-china/rest/maps/China_4326",
            urlDataFlow = "wss://iclsvrws.supermap.io/iserver/services/dataflowTest2/dataflow";
        map = L.map('map', {
            preferCanvas: true,
            crs: L.CRS.EPSG3857,
            center: [37, 108.42],
            maxZoom: 18,
            zoom: 5
        });
        new L.supermap.TiledMapLayer(urlMap).addTo(map);
        L.supermap.SecurityManager.registerToken(urlDataFlow, window.exampleToken);

        var popup = L.popup({
            offset: L.point(0, 0),
            autoPan: true
        });
        //创建DataFlowLayer，创建DataFlowLayer订阅iServer dataflow服务并将结果加载到地图上
        var dataFlowLayer = new L.supermap.DataFlowLayer(urlDataFlow, {
            render: 'mapv',
            pointToLayer: function (geoJsonPoint, latlng) {
                return L.marker(latlng, {
                    icon: L.icon({
                        iconUrl: '../img/taxi.png',
                        iconAnchor: [16, 16]
                    })
                });
            },
            onEachFeature: function (feature, layer) {
                popup.setLatLng(L.GeoJSON.coordsToLatLng(feature.geometry.coordinates))
                    .setContent(feature.properties.time);
                if (!popup.isOpen()) {
                    popup.addTo(map);
                }
            },
        });
        dataFlowLayer.addTo(map);

        //模拟实时数据 start
        //查询expectCount个线数据，每两秒将expectCount个点通过dataFlowService广播给iSevrer的dataflow服务,模拟expectCount个小汽车的移动轨迹
        //该测试数据有21331个数据
        var expectCount = 10000;
        query();
        var timer, featureResult, dataFlowBroadcast;

        function query() {
            widgets.loader.showLoader();
            var ids = [];
            while (ids.length < expectCount) {
                var n = Math.round(Math.random() * 21331);
                if (ids.indexOf(n) === -1) {
                    ids.push(n);
                }
            }
            var str = "(" + ids.join() + ")";
            var param = new L.supermap.QueryBySQLParameters({
                expectCount: expectCount,
                queryParams: {
                    name: "CountyRd_L@China",
                    attributeFilter: "SMID in " + str,
                }
            });
            new L.supermap.QueryService(urlQuery).queryBySQL(param).then(function (serviceResult) {
              featureResult = serviceResult;
              dataFlowBroadcast = new L.supermap.DataFlowService(urlDataFlow).initBroadcast();
              dataFlowBroadcast.on('broadcastSocketConnected', function (e) {
                widgets.loader.removeLoader();
                broadcast();
                timer = window.setInterval('broadcast()', 2000);
              });
            });
          }

        var count = 0;

        function broadcast() {
            var features = [];

            for (var index = 0; index < featureResult.result.recordsets[0].features.features.length; index++) {
                var geometry = featureResult.result.recordsets[0].features.features[index].geometry;
                var point = geometry.coordinates[(count % geometry.coordinates.length)];
                //处理多线
                if (L.Util.isArray(point[0])) {
                    point = point[0];
                }
                var data = {
                    geometry: {
                        coordinates: [point[0], point[1]],
                        type: "Point"
                    },
                    type: "Feature",
                    properties: {
                        id: index + 1,
                        time: new Date()
                    }
                };
                features.push(data);
            }
            dataFlowBroadcast.broadcast(features);
            count += 2;
        }
        //模拟实时数据 end
    </script>
</body>

</html>